<template>
  <view class="box">
      <view class="item" v-for="item in funBoxList" :key="item.id" @tap="goPage(item.id)">
        <image :src="item.imgUrls"></image>
        <view>{{ item.title }}</view>
      </view>
    </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  props:['funBoxList'],
    data(){
        return{
          
        }
    },
    methods:{
      goPage:function(id){
        console.log(id);
        if(id==0){
          Taro.navigateTo({
            url:'/pages/internationalSchoolPage/index'
          })
        }else if(id==1){
           Taro.navigateTo({
            url:'/pages/overseasHighSchoolPage/index'
          })
        }else if(id==2){
           Taro.navigateTo({
            url:'/pages/foreignUniversityPage/index'
          })
        }else if(id==3){
           Taro.navigateTo({
            url:'/pages/preparatoryCourseForStudyingAbroad/index'
          })
        }else if(id==4){
           Taro.navigateTo({
            url:'/pages/moreGuides/index'
          })
        }else if(id==5){
           Taro.navigateTo({
            url:'/pages/campusOpenDay/index'
          })
        }else if(id==6){
           Taro.navigateTo({
            url:'/pages/moreIssue/index'
          })
        }else if(id==7){
           Taro.navigateTo({
            url:'/pages/regionalTopics/index'
          })
        }
      }
    }
}
</script>

<style>
.box {
    display: flex;
    flex-wrap: wrap;
    height: 400px;
    background-color: white;
}

.item {
    width: 20%;
    margin-top: 40px;
    margin-right: 2%;
    margin-left: 2%;
    font-size: 27px;
    text-align: center;
}

.item:nth-child(4n+1) {
    margin-left: 4%;
}

.item image {
    width: 99px;
    height: 99px;
}

</style>